import { Button, Space, Cascader, Select, Modal, Layout, message } from 'myselfantd';
import type { ColumnsType, TableProps } from 'antd/es/table';
import React, { useRef, useState, useEffect, useMemo, useCallback } from 'react';
import ViewDetail from './ViewDetail';
import { getMachineAlarmInfo, getDeviceList } from '../api';
import type { getMachineAlarmInfoParams } from '../api';
const App: React.FC<any> = (props) => {
  interface DataType {
    code: number;
    machineName: string;
    name: string;
    task: string;
    count: number;
    time: string;
    type: string;
  }
  const [tabelRow, setTabelRow] = useState({} as any);
  const [showDetail, setVisible] = useState(false);
  const ref = useRef<any>();
  return (
    <>
      <Layout.PageContent
        pageContentRef={ref}
        search={useMemo(
          () => ({
            template: [
              {
                name: 'machineNameMt',
                render: () => (
                  <Cascader
                    request={async () => {
                      let { result } = await getDeviceList({ category: 0 });
                      return result;
                    }}
                    fieldNames={{ label: 'name', value: 'id' }}
                    placeholder="选择农机类型"
                  />
                )
              },
              {
                name: 'type',
                render: () => (
                  <Select placeholder="选择报警类型" allowClear>
                    <Select.Option value={0}>阈值报警</Select.Option>
                    <Select.Option value={1}>围栏报警</Select.Option>
                  </Select>
                )
              }
            ]
          }),
          []
        )}
        table={useMemo(
          () => ({
            template: [
              {
                title: ' 序号 ',
                dataIndex: 'index',
                render: (text: any, record: any, index: any) => `${index + 1}`,
                width: 80
              },
              {
                title: '编号',
                dataIndex: 'code',
                width: 180
              },
              {
                title: '报警设备',
                dataIndex: 'machineName',
                showSorterTooltip: false
              },
              {
                title: '报警内容',
                dataIndex: 'name',
                showSorterTooltip: false,
                width: 180
              },
              {
                title: '关联任务',
                dataIndex: 'taskId',
                showSorterTooltip: false
              },
              {
                title: '报警次数',
                dataIndex: 'count',
                showSorterTooltip: false,
                width: 150
              },
              {
                title: '报警开始时间',
                dataIndex: 'startTime',
                showSorterTooltip: false,
                width: 250
              },
              {
                title: '报警类型',
                dataIndex: 'type',
                showSorterTooltip: false,
                width: 150,
                render: (_: any, record: any) => {
                  enum Type {
                    '阈值报警',
                    '围栏报警'
                  }
                  return <Space size="middle">{Type[_]}</Space>;
                }
              },
              {
                title: '操作',
                key: 'action',
                render: (_: any, record: any) => (
                  <Space size="middle">
                    <Button
                      type="link"
                      block
                      onClick={() => {
                        if (_.taskId) {
                          setTabelRow(_);
                          setVisible(true);
                        } else {
                          message.error('任务编号不能为空');
                        }
                      }}>
                      查看详情
                    </Button>
                  </Space>
                )
              }
            ] as ColumnsType<DataType>,
            data: {
              data: [] as ColumnsType<DataType>,
              page: { total: 0, pageSize: 20, current: 1 }
            }
          }),
          []
        )}
        // request={useCallback(async (page: any, params: any) => {
        //   params.machineNameMt && (params.machineNameMt = params.machineNameMt?.splice(-1)[0]);
        //   let defaultParams: getMachineAlarmInfoParams = {
        //     pageIndex: page.current,
        //     pageSize: page.pageSize
        //   };
        //   let {
        //     result: { data, pageIndex: newPageIndex, pageSize: newPageSize, total } = {
        //       data: [],
        //       pageIndex: page.current,
        //       pageSize: page.pageSize,
        //       total: 0,
        //     },
        //   } = await getMachineAlarmInfo({ ...defaultParams, ...params });
        //   return {
        //     data,
        //     page: { total, pageSize: newPageSize, current: newPageIndex }
        //   };
        // }, [])}
      />
      <Modal.Dialog
        showDialog={showDetail}
        changeDialog={(state: boolean) => {
          setVisible(state);
        }}>
        <ViewDetail
          params={tabelRow}
          onFinish={() => {
            ref.current?.handleSearch();
          }}
        />
      </Modal.Dialog>
    </>
  );
};

export default App;
